new Vue({
    el: '#main-container',
    data: {
        pageInfo: {
            current: 1,//当前页默认值
            size: 5
        },
        app: {
            platform: 0,
            forceUpdate: 0 //默认选中
        }, //用于保存操作的模型对象 作为模型对象，提供默认值，即使使用空对象或者空字符串都可以
        active: false, //是否激活状态  false表示不激活 active为false表示显示列表 true表示新增列表
    },
    methods: {
        select: function (current, size) {
            //查询后台，返回分页数据，更新vue的pageInfo对象
            axios({
                url: '/manager/app/select',
                params: {
                    current: current,
                    size: size
                }
            }).then(response => {
                //箭头函数会将上下文的this（vue对象）传递过来
                console.log(response);//获取ResultBean
                //response.data ->ResultBean<Page> ResultBean.data ->Page对象   列表数据->Page对象.records
                this.pageInfo = response.data.data;//获取ResultBean中的data
                // console.log(this.pageInfo) 查看pageInfo
            }).catch(function (error) {
                console.log(error);
            })
        },
        toUpdate: function (id) {
            axios({
                url: '/manager/app/selectOne',
                params: {id: id}
            }).then(respone => {
                if (respone.data.code != 200) {
                    layer.msg(respone.data.msg);//前端处理
                    return;
                }
                //从数据库查询出id对应的app信息，再传递到子页面
                layer.app = respone.data.data;
                console.log('respone:', respone)
                console.log(layer)
                let index = layer.open({
                    type: 2,
                    title: false,
                    content: '/manager/app/app-update.html',
                    area: ['60%', '80%'],
                    end: () => {
                        this.select(this.pageInfo.current, this.pageInfo.size);
                    }
                })
            }).catch(function (error) {
                //msg方法参数只能是字符串
                layer.msg(error.message);
            })
        },
        save: function () {
            axios({
                url: "/manager/app/saveOrUpdate",
                method: "post",
                data: this.app
            }).then(response => {
                if (response.data.code == 200) {//失败不切换列表div
                    //成功操作:1.切换到列表的div 2。更新列表  3. 清空新增表单的内容
                    this.active = false;
                    this.select(this.pageInfo.current, this.pageInfo.size);
                    this.app = {
                        platform: 0,
                        forceUpdate: 0 //默认选中
                    };//清空模型对象的属性值
                }

                layer.msg(response.data.msg);
            })
        },
        changeActive: function () {
            //修改激活状态
            this.active = !this.active;
        },
        doDelete:function(id){//注意函数命名 不要用delete
            //弹出确认框
            //config用于msg框设置
            layer.msg("是否删除?",{
                time:0,//无自动消失计时
                btn:['是','否'],
                yes:index => {//index是当前的信息框索引
                    // console.log(this);由于layer的yes回调函数会将this修改，所以需要箭头函数将vue的对象传递过来
                    //根据id调用后台  删除
                    axios({
                        url:'/manager/app/delete',
                        params:{
                            id:id
                        }
                    }).then(response => {
                        //根据结果  进行提示
                        layer.close(index);//关闭当前的msg窗口
                        layer.msg(response.data.msg);
                        //删除成功则刷新数据
                        if(response.data.code==200){
                            this.select(this.pageInfo.current,this.pageInfo.size);
                        }
                    })
                }
            })
        }
    },

    created: function () {
        this.select(this.pageInfo.current, this.pageInfo.size);//在vue创建后调用函数返回数据
    }
});